<template>
  <div class="font-size-30 height-100 width-100 flex flex-direction-column">
    <zt-table-page ref="tableRef" :searchColumns="searchFormData" :tableColumns="columnsData" :api="apiGetRoleList" :moreOperations="operationsConfig">
      <template #topRight>
        <el-row class="mb-4" v-auth="'rolesManage_create'">
          <el-button type="primary" :icon="Plus" @click="handerCreateRoleDialog">新增角色</el-button>
        </el-row>
      </template>

      <template #activated="{ row }">
        <el-tag class="ml-2" type="success" v-if="row.activated">激活</el-tag>
        <el-tag class="ml-2" type="danger" v-if="!row.activated">禁用</el-tag>
      </template>
      <template #moreColumn="{ row, index }">
        <el-button size="small" type="primary" @click.stop="handleEdit(row)" v-auth="'rolesManage_modify'">修改</el-button>
        <el-button size="small" type="warning" @click.stop="handleAuth(row)"
          v-auth="'rolesManage_authorize'">授权</el-button>
        <el-button size="small" type="danger" @click.stop="handleDelete(row)" v-auth="'rolesManage_delete'">删除</el-button>
        <el-button size="small" type="success" v-auth="'rolesManage_activation'" v-if="!row.activated"
          @click="handleChange(row)">激
          活</el-button>
        <el-button type="info" size="small" v-auth="'rolesManage_disable'" v-if="row.activated"
          @click="handleChange(row)">禁
          用</el-button>
      </template>
    </zt-table-page>
    <add-role-dialog v-model="showVisible" v-if="showVisible" :objectValue="objectValue" @success="handerReload"
      :currentType="currentType" />

    <empower-dialog v-model="isEmpowerVisible" :objectValue="objectValue" v-if="isEmpowerVisible" />
  </div>
</template>

<script setup>
import {
  Plus,
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { apiGetRoleList, apiPutActiveRole, apiPutDisableRole, apiDeleteRole } from "@/api/admin/systemSettings/rolesManage/api.js";
import { columnsData, searchFormData } from "./configData.js"
import addRoleDialog from "./components/add-role-dialog.vue"
import empowerDialog from './components/empower-dialog.vue'

// 更多列配置信息
const operationsConfig = {
  title: '操作', //标题
  align: 'center',//居中方式
  width: '320px',//宽度
  fixed: 'right',//固定定位方向
}

const currentType = ref('add') //当前操作类型
const showVisible = ref(false)
const objectValue = ref({})
// 新增角色
function handerCreateRoleDialog() {
  currentType.value = 'add';
  showVisible.value = true
}
//修改角色
function handleEdit(row) {
  currentType.value = 'edit';
  showVisible.value = true
  objectValue.value = row
}

const tableRef = ref(null)
// 重新加载 表格数据
async function handerReload() {
    tableRef.value.reload() //调用父组件里面的重载方法
}

// 删除角色
async function handleDelete(row) {
  ElMessageBox.confirm('你是否确认删除该角色')
    .then(() => {
      apiDeleteRole({ ids: row.roleId }, '删除中').then(res => {
        if (res.success) {
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
          handerReload()
          return false
        }
        ElMessage({
          message: res.message,
          type: 'warning',
        })
      })
    })
}

const isEmpowerVisible = ref(false) //控制授权弹框
// 授权按钮事件
function handleAuth(row) {
  isEmpowerVisible.value = true
  objectValue.value = {
    roleId: row.roleId,
    roleName: row.roleName,
  }
}


// 激活、禁用
function handleChange(row) {
  ElMessageBox.confirm(`你是否确认${!row.activated ? '激活' : '禁用'}该角色`)
    .then(() => {
      if (!row.activated) {
        handleActiveUser(row)
      } else {
        handleDisabledUser(row)
      }
    })
}

// 激活角色
function handleActiveUser(row) {
  apiPutActiveRole({ ids: row.roleId }, '角色激活中').then(res => {
    if (res.success) {
      ElMessage({
        message: '角色激活成功',
        type: 'success',
      })
      handerReload()
      return false
    }
    ElMessage({
      message: res.message,
      type: 'warning',
    })
  })
}

// 禁用角色
async function handleDisabledUser(row) {
  apiPutDisableRole({ ids: row.roleId }, '角色禁用中').then(res => {
    if (res.success) {
      ElMessage({
        message: '角色禁用成功',
        type: 'success',
      })
      handerReload()
      return false
    }
    ElMessage({
      message: res.message,
      type: 'warning',
    })
  })
}

</script>

<style lang='scss' scoped></style>